<!DOCTYPE html>
<html>
<head>
    <title>模具成本统计表表</title>
    #parse("sys/header.html")
</head>
<body>
<div id="rrapp" v-cloak style="width: 100%;height:100%;margin: 20px">
    <Row :gutter="16" style="margin: 8px 0px 0px 1px">
        <div class="search-group">
            <i-col span="3">
                <i-select v-model="q.dept" placeholder="所属车间">
                    <i-option v-for="item in deptList" :value="item.deptId" :key="item.deptId">{{item.name}}
                    </i-option>
                </i-select>
            </i-col>
            <i-col span="4">
                <Date-picker type="year" v-model="q.year" placeholder="请选择年份"></Date-picker>
            </i-col>
            <i-button @click="query">查询</i-button>
            <i-button @click="reloadSearch">重置</i-button>
        </div>
    </Row>
    <Row :gutter="16" style="margin-top: 15px">
        <div style="height: 85vh;width:12%;overflow:auto;float:left;">
            <p class="text-center" style="font-size: 15px;">模具类型</p>
            <div id="storeLayer">
                <ul id="typeTree" class="ztree"></ul>
            </div>
        </div>
        <div id="container"
             style="width: 85%;height:85vh;overflow:auto;float:left;margin: 10px;padding: 20px;border: 1px solid #000"></div>
    </Row>
</div>
</div>
<script src="${rc.contextPath}/statics/plugins/echarts/echarts.min.js"></script>
<script>
    $(function () {
        // 加载铸造车间列表
        Ajax.request({
            url: "../sys/dept/getCJ",
            async: true,
            successCallback: function (res) {
                vm.deptList = res.deptList;
            }
        });
        vm.getTypeTree();
        //vm.query();
    });
    // 模具分类树初始化
    var typeTree;
    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "superType",
                rootPId: 0
            },
            key: {
                url: "nourl",
                name: "typeName" //name 与 typeName 绑定
            },
        },
        callback: {
            onClick: function () {
                var node = typeTree.getSelectedNodes();
                vm.q.mouldTypeId = node[0].id;
                vm.query();
            }

        }
    };

    var myChart;
    var vm = new Vue({
        el: '#rrapp',
        data: {
            deptList: [], // 车间列表
            q: {
                year: '', // 查询年份
                mouldTypeId: '', // 模具类别ID
                dept: '' // 所属车间
            },
            option: {
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: []
                    // source: [
                    //     ['dateRange', '2012', '2013', '2014', '2015', '2016', '2017'],
                    //     ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                    //     ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                    //     ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                    //     ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
                    // ]
                },
                xAxis: {type: 'category'},
                yAxis: {gridIndex: 0},
                grid: {top: '55%'},
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {focus: 'series'}
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {focus: 'series'}
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {focus: 'series'}
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {focus: 'series'}
                    },
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '30%',
                        center: ['50%', '25%'],
                        emphasis: {
                            focus: 'self'
                        },
                        label: {
                            formatter: '{b}: {@2012} ({d}%)'
                        },
                        encode: {
                            itemName: 'dateRange',
                            value: '2012',
                            tooltip: '2012'
                        }
                    }
                ]
            }
        },
        methods: {
            reloadSearch: function () {
                this.q = {
                    year: '',
                    mouldTypeId: '',
                    dept: ''
                };
                // 取消选中
                typeTree.cancelSelectedNode();
                vm.query();
            },
            query: function () {
                let _this = this;
                var param = {};
                if (this.q.year) {
                    param.year = new Date(this.q.year).getFullYear()
                }
                if (this.q.mouldTypeId) {
                    param.mouldTypeId = this.q.mouldTypeId;
                }
                if (this.q.dept) {
                    param.dept = this.q.dept;
                }
                myChart.showLoading();
                Ajax.request({
                    url: "../mould/stat/cost",
                    params: JSON.stringify(param),
                    type: "POST",
                    contentType: "application/json",
                    successCallback: function (res) {
                        myChart.hideLoading();
                        var moldCostStatData = res.moldCostStatData;
                        var length = moldCostStatData.length; // 4
                        var newSeries = [];
                        for (let i = 0; i < length - 1; i++) {
                            newSeries.push({
                                type: 'line',
                                smooth: true,
                                seriesLayoutBy: 'row',
                                emphasis: {focus: 'series'}
                            });
                        }
                        newSeries.push({
                            type: 'pie',
                            id: 'pie',
                            radius: '30%',
                            center: ['50%', '25%'],
                            emphasis: {
                                focus: 'self'
                            },
                            label: {
                                formatter: '{b}: {@2012} ({d}%)'
                            },
                            encode: {
                                itemName: 'dateRange',
                                value: '2012',
                                tooltip: '2012'
                            }
                        })
                        _this.option.series = newSeries;
                        _this.option.dataset.source = moldCostStatData;
                        myChart.setOption(_this.option,true,false);
                    }
                });
            },
            getTypeTree: function () {
                //加载模具类型树
                Ajax.request({
                    url: "../moduletype/select",
                    async: true,
                    successCallback: function (r) {
                        typeTree = $.fn.zTree.init($("#typeTree"), setting, r.typeList);
                        typeTree.expandAll(true);
                    }
                });
            }
        },
        mounted: function () {
            // 初始化
            myChart = echarts.init(document.getElementById("container"));
            myChart.setOption(this.option, true);
            myChart.on('updateAxisPointer', function (event) {
                const xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    const dimension = xAxisInfo.value + 1;
                    myChart.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });
            // 饼图点击跳转到指定页面
            myChart.on('click', function (param) {
                if(param.seriesType === 'pie'){
                    openWindow({
                        type: 2,
                        title: '<i class="fa fa-bars"></i> 模具成本统计',
                        content: '../module/moduleCostStat.html?moduleNo=' + param.data[0]
                    })
                }
            });
            this.query();
        }
    });

</script>

</body>
</html>
